<template>
	<view>
		<!-- 背景图 -->
		<view class="bg">
			<image :src="image" mode=""></image>
		</view>

		<!-- 排行榜 -->
		<view class="paihang ">
			<view class="flex align-center  text-center"
				style="background: #F2F2F2;border-radius: 32upx 32upx 0 0;">
				<view class="flex-sub padding-tb-sm" v-for="(item,index) in tab" :key="index" :class="item.id==tabIndex?'active':''"
					@click="change(item.id)">{{item.name}}</view>
			</view>
			<view class="paihang-box padding-left ">
				<view class="paihang-box-header flex align-center  padding-top-sm">
					<text>排名</text>
					<text>员工姓名</text>
					<text>派单量</text>
					<text>派单金额</text>
				</view>
				<view class="paihang-box-list " v-for="(item,index) in list" :key="index">
					<view class="paihang-box-list-item flex justify-between align-center" style="margin-top: 40rpx;">
						<view class="fg" v-if="index==0">
							<image style="width: 68rpx;height: 75rpx;" src="../static/one.png" mode=""></image>
						</view>
						<view class="fg" v-if="index==1">
							<image style="width: 68rpx;height: 75rpx;" src="../static/two.png" mode=""></image>
						</view>
						<view class="fg" v-if="index==2">
							<image style="width: 68rpx;height: 75rpx;" src="../static/three.png" mode=""></image>
						</view>
						<view v-if="index!=0&&index!=1&&index!=2">{{index}}</view>
						<view class="fg flex align-center">
							<image style="width: 56rpx;height: 56rpx;border-radius: 50%;margin-right: 10rpx;"
								:src="item.avatar?item.avatar:'../../static/logo.png'" mode=""></image>
							<text>{{item.userName}}</text>
						</view>
						<view class="fg">
							{{item.counts}}
						</view>
						<view class="fg">
							<span>¥</span>
							{{item.money?item.moneyitem.money:'0'}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				list: [],
				count: 0,
				image: '',
				tab: [{
					id: 1,
					name: '服务排行'
				}, {
					id: 2,
					name: '任务排行'
				}],
				tabIndex: 1
			};
		},
		onLoad() {
			this.getlist()

			// 排行榜图片 302
			this.$Request.get('/app/common/type/302').then(res => {
				if (res.code == 0) {
					this.image = res.data.value
				}
			});
		},
		onShow() {

		},
		methods: {
			change(index) {
				this.tabIndex = index
				this.page = 1
				this.getlist()
			},
			getlist() {
				if(this.tabIndex==1){ //服务排行榜
					let data = {
						page: this.page,
						limit: this.size
					}
					this.$Request.get('/app/orders/selectStaffUserOrdersByTime', data).then(res => {
						uni.hideLoading();
						if (this.page == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = [...this.list, ...res.data.records]; //追加新数据
						this.count = res.data.total
						// for (let i = 0; i < this.goods.length; i++) {
						// 	this.goods[i].gameName = this.goods[i].gameName.split(",");
						// }
					})
				}else if(this.tabIndex==2){  //任务排行榜
					let data = {
						page: this.page,
						limit: this.size
					}
					this.$Request.get('/app/orders/selectStaffUserHelpTakesByTime', data).then(res => {
						uni.hideLoading();
						if (this.page == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = [...this.list, ...res.data.records]; //追加新数据
						this.count = res.data.total
						// for (let i = 0; i < this.goods.length; i++) {
						// 	this.goods[i].gameName = this.goods[i].gameName.split(",");
						// }
					})
				}
			
			}
		},
		onReachBottom: function() {
			if (this.count = this.list.length) {
				uni.showToast({
					title: '到底了~',
					icon: 'none'
				})
			} else {
				this.page = this.page + 1;
				this.getlist()
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getlist()
		},
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 360rpx;
		position: relative;
		z-index: 0;

		image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}
	}

	.paihang {
		width: 100%;
		height: auto;
		margin-top: -20rpx;
		background-color: #ffffff;
		border-radius: 32rpx 32rpx 0 0;
		position: fixed;
		top: 432rpx;

		.paihang-box {
			width: 686rpx;
			height: 100%;

			.paihang-box-header {
				text {
					color: #999999;
					display: inline-block;
					width: calc(100% / 4);
				}

				text:nth-of-type(3) {
					text-align: center;
				}

				text:nth-of-type(4) {
					text-align: right;
				}
			}

			.paihang-box-list {
				width: 100%;

				.paihang-box-list-item {
					width: 100%;

					.fg {
						width: calc(100% / 4);

						.text {
							color: #171717;
							font-size: 28rpx;
							font-weight: bold;
						}
					}

					.fg:nth-of-type(3) {
						text-align: center;
					}

					.fg:nth-of-type(4) {
						text-align: right;
					}
				}
			}
		}
	}

	.active {
		background: #ffffff;
		color: #557EFD;
		border-radius: 32upx 32upx 0 0;
	}
</style>
